<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ebs UI</title>
    <link href="ui/js/elementui/theme-chalk/index.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }

        body {
            margin: 0;
            padding: 0;
            background: #f9f9f9
        }

        .login-pos {
            width: 420px;
            position: absolute;
            left: 50%;
            margin-top: 180px;
            margin-left: -210px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <el-card class="box-card login-pos" shadow="hover">
        <div class="clearfix" slot="header">
            <span>登陆</span>
        </div>
        <el-form label-width="100px" status-icon>
            <el-form-item label="输入账号">
                <el-input type="text" v-model="mainUsername"></el-input>
            </el-form-item>
            <el-form-item label="输入密码">
                <el-input autocomplete="off" type="password" v-model="mainPassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="btnEnabled" @click="doLogin" type="primary">进入</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<script src="ui/js/polyfill.min.js"></script>
<script src="ui/js/vue/vue.js"></script>
<script src="ui/js/elementui/index.js"></script>
<script src="ui/js/axios/axios.min.js"></script>
<script src="ui/js/api.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                mainUsername: '',
                mainPassword: '',
                btnEnabled: false
            }
        },
        mounted: function () {

        },
        beforeDestroy() {
        },
        methods: {
            doLogin() {
                var that = this;
                var loading = that.$loading({
                    lock: true,
                    text: '请稍后...'
                });
                $api.clearToken();
                $api.login(that.mainUsername, that.mainPassword).then(function (res) {
                    if (res.code == 0) {
                        $api.setToken(res.data);
                        location.href = '/swagger-ui.html';
                    } else {
                        that.$message.error(res.message);
                    }
                    loading.close();
                }).catch(function (ex) {
                    loading.close();
                });
            }
        }
    });
</script>

</html>
